import React, {Component} from 'react';
import {Flex, Button, Switch, InputItem, List, Radio, WhiteSpace} from '@ant-design/react-native';
import {Image, StyleSheet, Text, View, ScrollView} from 'react-native';
import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button';

const RadioItem = Radio.RadioItem;

class Investigation extends Component {
    static navigationOptions = {
        title: '问卷调查',
    };

    constructor(props) {
        super(props);
        this.onpress = () => {
            this.setState({
                checked: !this.state.checked,
            });
        };
        this.state = {
            bgColor: 'white',
            redColor: 'red',
            checked: true,
            number: '',
            text: '',
        };
        this.onSelect = this.onSelect.bind(this);
    }

    onSelect(index, value) {
        this.setState(
            {
                text: value,
            },
            () => console.log(this.state.text),
        );
    }

    render() {
        const setName = (text) => {
            this.setState({
                number: text,
            });
        };
        return (
            <ScrollView style={{flex: 1, borderWidth: 0.3}}>
                <View style={{width: '100%'}}>
                    <WhiteSpace size={'xl'} />
                    <Flex direction={'column'} align={'start'}>
                        <Text>1.您购买的物业类型？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'住宅'}>
                                    <Text>住宅</Text>
                                </RadioButton>
                                <RadioButton value={'商业'}>
                                    <Text>商业</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                        {this.state.text === '住宅' ? (
                            <Flex
                                direction={'row'}
                                justify={'between'}
                                style={{
                                    width: '100%',
                                    height: 50,
                                }}>
                                <Text style={{width: 40, height: 20, marginTop: '1%'}}>住宅:</Text>
                                <List style={{width: 70}}>
                                    <InputItem type={'number'} />
                                </List>
                                <Text style={{width: 20, height: 20, marginTop: '1%'}}>栋</Text>
                                <List style={{width: 70}}>
                                    <InputItem type={'number'} />
                                </List>
                                <Text style={{width: 20, height: 20, marginTop: '1%'}}>层</Text>
                                <List style={{width: 70}}>
                                    <InputItem type={'number'} />
                                </List>
                                <Text style={{width: 20, height: 20, marginTop: '1%'}}>号</Text>
                            </Flex>
                        ) : (
                            <Flex
                                direction={'row'}
                                justify={'start'}
                                style={{
                                    width: '100%',
                                    height: 50,
                                }}>
                                <Text style={{width: 40, height: 20, marginTop: '1%'}}>商业:</Text>
                                <List style={{width: 70}}>
                                    <InputItem type={'number'} />
                                </List>
                                <Text style={{width: 20, height: 20, marginTop: '1%', marginLeft: '2%'}}>号</Text>
                            </Flex>
                        )}
                    </Flex>
                    <WhiteSpace size={'xl'} />
                    <Flex direction={'column'} align={'start'}>
                        <Text>2.您的性别，年龄？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'男'}>
                                    <Text>男</Text>
                                </RadioButton>

                                <RadioButton value={'女'}>
                                    <Text>女</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                        {/*<View style={{width: '100%', height: 1, backgroundColor: '#9E9E9E'}}></View>*/}
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'19-28岁'}>
                                    <Text>19-28岁</Text>
                                </RadioButton>
                                <RadioButton value={'29-38岁'}>
                                    <Text>29-38岁</Text>
                                </RadioButton>
                                <RadioButton value={'39-49岁'}>
                                    <Text>39-49岁</Text>
                                </RadioButton>
                                <RadioButton value={'49-58岁'}>
                                    <Text>49-58岁</Text>
                                </RadioButton>
                                <RadioButton value={'58岁以上'}>
                                    <Text>58岁以上</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>3.您的家庭结构？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'单身一族'}>
                                    <Text>单身一族</Text>
                                </RadioButton>
                                <RadioButton value={'新婚家庭'}>
                                    <Text>新婚家庭</Text>
                                </RadioButton>
                                <RadioButton value={'三口/四口之家'}>
                                    <Text>三口/四口之家</Text>
                                </RadioButton>
                                <RadioButton value={'三代同堂'}>
                                    <Text>三代同堂</Text>
                                </RadioButton>
                                <RadioButton value={'其他'}>
                                    <Text>其他</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>4.您家庭月总收入？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'2000元以下'}>
                                    <Text>2000元以下</Text>
                                </RadioButton>
                                <RadioButton value={'2001-5000元'}>
                                    <Text>2001-5000元</Text>
                                </RadioButton>
                                <RadioButton value={'5001-8000元'}>
                                    <Text>5001-8000元</Text>
                                </RadioButton>
                                <RadioButton value={'8001-10000元'}>
                                    <Text>8001-10000元</Text>
                                </RadioButton>
                                <RadioButton value={'10000元以上'}>
                                    <Text>10000元以上</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>5.您（家）有车吗？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'无'}>
                                    <Text>无</Text>
                                </RadioButton>
                                <RadioButton value={'有一辆'}>
                                    <Text>有一辆</Text>
                                </RadioButton>
                                <RadioButton value={'两辆'}>
                                    <Text>两辆</Text>
                                </RadioButton>
                                <RadioButton value={'两辆以上'}>
                                    <Text>两辆以上</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>6.您（家）有购车的计划吗？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'有'}>
                                    <Text>有</Text>
                                </RadioButton>
                                <RadioButton value={'无'}>
                                    <Text>无</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>7.您（家）买停车位了吗？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'没有购买'}>
                                    <Text>没有购买</Text>
                                </RadioButton>
                                <RadioButton value={'已购买'}>
                                    <Text>已购买</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>8.您（家）有过买车位的打算吗？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'有'}>
                                    <Text>有</Text>
                                </RadioButton>
                                <RadioButton value={'没有'}>
                                    <Text>没有</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>9.您知道小区停车位归谁吗？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'归开发商所有'}>
                                    <Text>归开发商所有</Text>
                                </RadioButton>
                                <RadioButton value={'归业主所有'}>
                                    <Text>归业主所有</Text>
                                </RadioButton>
                                <RadioButton value={'归出钱购买的业主所有'}>
                                    <Text>归出钱购买的业主所有</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>10. 您认为未来车位会增值吗？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'肯定增值'}>
                                    <Text>肯定增值</Text>
                                </RadioButton>
                                <RadioButton value={'至少可以保值'}>
                                    <Text>至少可以保值</Text>
                                </RadioButton>
                                <RadioButton value={'不增值'}>
                                    <Text>不增值</Text>
                                </RadioButton>
                                <RadioButton value={'看不准'}>
                                    <Text>看不准</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>11.您不买车位的理由是什么？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'价格高'}>
                                    <Text>价格高</Text>
                                </RadioButton>
                                <RadioButton value={'不划算'}>
                                    <Text>不划算</Text>
                                </RadioButton>
                                <RadioButton value={'暂时没有车'}>
                                    <Text>暂时没有车</Text>
                                </RadioButton>
                                <RadioButton value={'等机会'}>
                                    <Text>等机会</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>12. 什么情况下，你会买车位？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'有车了'}>
                                    <Text>有车了</Text>
                                </RadioButton>
                                <RadioButton value={'准备买车了'}>
                                    <Text>准备买车了</Text>
                                </RadioButton>
                                <RadioButton value={'车确实没有地方停了'}>
                                    <Text>车确实没有地方停了</Text>
                                </RadioButton>
                                <RadioButton value={'非常划算'}>
                                    <Text>非常划算</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>13.如果“免费送车位”你，你要吗？</Text>
                        <Flex direction={'row'}>
                            <RadioGroup style={{flexDirection: 'column'}} onSelect={(index, value) => this.onSelect(index, value)}>
                                <RadioButton value={'要'}>
                                    <Text>要</Text>
                                </RadioButton>
                                <RadioButton value={'不要'}>
                                    <Text>不要</Text>
                                </RadioButton>
                                <RadioButton value={'做不了主'}>
                                    <Text>做不了主</Text>
                                </RadioButton>
                            </RadioGroup>
                        </Flex>
                    </Flex>
                    <Flex direction={'column'} align={'start'}>
                        <Text>14.您（家）谁做主？</Text>
                        <Flex direction={'row'} style={{marginTop: '2%'}}>
                            <Text style={{width: 50, height: 20, marginTop: '1%'}}>联系人:</Text>
                            <List style={{width: 70}}>
                                <InputItem type={'text'} />
                            </List>
                            <Text style={{width: 70, height: 20, marginTop: '1%'}}>联系电话:</Text>
                            <List style={{width: 70}}>
                                <InputItem type={'number'} />
                            </List>
                        </Flex>
                    </Flex>
                    <Button type={'warning'} style={{marginTop: '10%'}}>
                        提交
                    </Button>
                </View>
            </ScrollView>
        );
    }
}

export default Investigation;

const styles = StyleSheet.create({
    view: {
        width: '100%',
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        marginTop: 50,
    },
    input: {
        borderWidth: 0.3,
        width: 80,
    },
    buttonview: {
        width: '100%',
        height: 150,
        justifyContent: 'center',
        alignItems: 'center',
    },
    button: {
        width: 200,
    },
    nameinputstyle: {
        width: '65%',
        textAlign: 'center',
        flexDirection: 'column',
        justifyContent: 'center',
    },
});
